<template>
	<view>
		<view class="modal" v-if="isShow">
			<view class="mask">	
			</view>
			<view class="container">
				<view class="title">提示</view>
				<view class="content">
					<svg t="1735095527346" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1501" width="64" height="64"><path d="M512 1024C229.248 1024 0 794.752 0 512S229.248 0 512 0s512 229.248 512 512-229.248 512-512 512z m0-85.333333c235.648 0 426.666667-191.018667 426.666667-426.666667S747.648 85.333333 512 85.333333 85.333333 276.352 85.333333 512s191.018667 426.666667 426.666667 426.666667z m-42.666667-469.333334a42.666667 42.666667 0 0 1 85.333334 0v298.666667a42.666667 42.666667 0 0 1-85.333334 0v-298.666667z m38.4-136.533333a59.733333 59.733333 0 1 1 0-119.466667 59.733333 59.733333 0 0 1 0 119.466667z" fill="#f94102" p-id="1502"></path></svg>
					<view style="margin-top: 20rpx;">此二维码链接已失效</view>
				</view>
				<view class="btns" v-if="canBack">
					<button   @click="back">返回</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"invalidCode",
		props: {
			isShow: {
				type: Boolean,
				default: false
			},
			canBack: {
				type: String,
			},
		},
		data() {
			return {
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
.btns {
	width: 100%;
	display: flex;
	align-items: center;
	padding: 0 rpx;
	
	button {
		flex: 1;
	}
}
.modal {
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0,0,0,0.6);
		z-index: 99999;
	}
	.container {
		position: fixed;
		top: 25%;
		left: 50%;
		transform: translateX(-50%);
		width: 650rpx;
		height: 600rpx;
		padding: 40rpx 30rpx;
		background: #fff;
		border-radius: 6px;
		display: flex;
		flex-direction: column;
		align-items: center;
		z-index: 99999;
		
		.title {
			line-height: 1.6;
			font-size: 36rpx;
			font-weight: 800;
		}
		.content {
			margin: 20rpx 0;
			flex: 1;
			overflow-y: scroll;
			display: flex;
			align-items: center;
			font-size: 36rpx;
			flex-direction: column;
			justify-content: center;
			
			view {
				max-height: 50vh;
				padding: 10rpx 0;
			}
		}
		button {
			width: 300rpx;
			margin: 20rpx;
			&.active {
				background-color: #004D95;
				color: #FFFFFF;
			}
		}
	}
}
</style>